<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { total, ref, value } = Vue;
    const app = Vue.createApp({
      template: `
    <div>
    <h1 style="color:red" @click="this.count++">
    商品（铅笔）  数量：{{count}}，小计：{{subtotal}}元， 总计：{{total}}
    </h1>
    </div>`,
      data() {
        return {
          count: 0,
        };
      },
      // computed: {
      //     subtotal(){
      //         return this.count *5.0
      //     },
      //     total:{
      //     get(){
      //         return this.count * 5+100;
      //     },
      //     set(val){
      //         return this.count=val-5
      //     }
      // }
      // },
      setup(props) {
        const { ref, computed } = Vue;
        const count = ref(0);
        const subtotal = computed(() => {
          return count.value * 5;
        });
        const total = computed({
          get: () => {
            return count.value * 5.0 + 100;
          },
          set: (val) => {
            return (count.value = val - 5);
          },
        });

        return { count, subtotal, total };
      },
    });
    app.mount("#app");
  </script>
</html>
